<template>
    <h1>VUE3.0学习---reactive只能是对象类型，层级深推荐</h1>
    <div class = "test1">
        <p>姓名：{{ person.name }}</p>
        <p>年龄：{{ person.age }}</p>
        <button @click="changName">修改姓名</button>
        <button @click="changAge">修改年龄</button>
        <button @click="changPerson">修改对象</button>
    </div>
</template>

<script lang="ts" setup>
    import {reactive} from 'vue'
    let person = reactive(
        {
            name:"张三",
            age:18
        }
    )
    //修改数据
    function changName(){
        person.name += '~'
    }
    function changAge(){
        person.age += 1
    }
    // 不能直接进行赋值 person = {name:"李四",age:20}
    function changPerson(){
        person = Object.assign(person,{name:"李四",age:20})
        console.log(person)
    }
</script>

<style scoped>
 .test1{
    font-size: 20px;
    color: blue;
    background-color: greenyellow;
    border: 2px solid #007bff; /* 设置边框的宽度和颜色 */
    border-radius: 20px; /* 将四个角变成圆形 */
    width: auto; /* 设置元素的宽度 */
    height: auto; /* 设置元素的高度 */
    padding: 20px;
 }

 button{
    margin: 2px;
 }

</style>